<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="../../compute/static/layui-v2.6.8/layui/css/layui.css">
<script src="../../compute/static/layui-v2.6.8/layui/layui.js"></script>
<script src="../../compute/static/codemirror/mode/javascript/javascript.js"></script>
<script src="../../compute/static/jquery-3.3.1.min.js"></script>
<body>
<div style="color: #fff; padding: 10px 10px; font-size: 30px">Services</div>
<!--  表名-->

<div style="padding: 0px 20px 0px 20px">
    <div class= "layui-font-16" style="padding: 0px 20px 0px 20px; color: #fff">
        <form>
            筛选
            <select id="select_ns" name="ns">
                <option value="all" selected="all">all namespaces</option>
                {% for item in ns %}
                <option value={{item}}>{{item}}</option>
                {% endfor %}
              </select>   
        </form>
    </div>

<div class="layui-fluid" style="padding: 0px">

    <div class="layui-row" style="background: #1F4661">
        <div class="layui-col-md2" style="padding: 8px 0px 8px 8px">
            <div class= "layui-font-16" style="color: #fff">
                名称
            </div>
        </div>
        <div class="layui-col-md2" style="padding: 8px 0px 8px 8px">
            <div class= "layui-font-16" style="color: #fff">
                命名空间
            </div>
        </div>
        <div class="layui-col-md2" style="padding: 8px 0px 8px 8px">
            <div class= "layui-font-16" style="color: #fff">
                类型
            </div>
        </div>
        <div class="layui-col-md2" style="padding: 8px 0px 8px 8px">
            <div class= "layui-font-16" style="color: #fff">
                ClusterIP
            </div>
        </div>
        <div class="layui-col-md3" style="padding: 8px 0px 8px 8px">
            <div class= "layui-font-16" style="color: #fff">
                目标端口
            </div>
        </div>
        <div class="layui-col-md1" style="padding: 8px 0px 8px 8px">
            <div class= "layui-font-16" style="color: #fff">
                查看yaml
            </div>
        </div>
    </div>
    <div style="border: 2px solid rgba(1, 227, 243, 0.822)"></div>
    <div id="dq" >
        {% for post in posts %}
        <div class="layui-fluid" style="padding: 0px">
            <div class="layui-row" style="background: #1a1a1e">
                <div class="layui-col-md2" style="padding: 8px 0px 8px 8px">
                    <div class= "layui-font-16" style="color: #fff">
                        {{ post['name'] }}
                    </div>
                </div>
                <div class="layui-col-md2" style="padding: 8px 0px 8px 8px">
                    <div class= "layui-font-16" style="color: #fff">
                        {{ post['ns'] }}
                    </div>
                </div>
                <div class="layui-col-md2" style="padding: 8px 0px 8px 8px">
                    <div class= "layui-font-16" style="color: #fff">
                        {{ post['type'] }}
                    </div>
                </div>
                <div class="layui-col-md2" style="padding: 8px 0px 8px 8px">
                    <div class= "layui-font-16" style="color: #fff">
                        {{ post['ip'] }}
                    </div>
                </div>
                <div class="layui-col-md3" style="padding: 8px 0px 8px 8px">
                    <div class= "layui-font-16" style="color: #fff">
                        {{ post['target_port'] }}
                    </div>
                </div>
                <div class="layui-col-md1" style="padding: 8px 0px 8px 8px">
                    <div class= "layui-font-16" style="color: #fff">
                        <a href="{{ url_for('k8s-show.service_yaml_new', name=post['name'], ns=post['ns'])}}"><i class="layui-icon layui-icon-file" style="font-size: large; color: white;" ></i></a>
                    </div>
                </div>
            </div>
            <div style="border: 0.5px solid silver"></div>
        </div>
        {% endfor %}
    </div>
</div>
</div>
</body>
</html>

<script type="text/javascript">
    $('#select_ns').change(function() {
        var Sel=document.getElementById("select_ns");
        var index = Sel.selectedIndex;
        var ns = Sel.options[index].value;
        var v = ""
        $.get("/compute/new/getServicesWithNS/?ns=" + ns,function(data){
            for(var d in JSON.parse(data)){
                v += 
                '<div class="layui-fluid" style="padding: 0px">'+
                '<div class="layui-row" style="background: #1a1a1e">'+
                '<div class="layui-col-md2" style="padding: 8px 0px 8px 8px">'+
                '<div class= "layui-font-16" style="color: #fff">'+
                    JSON.parse(data)[d].name+
                '</div>'+
                '</div>'+
                '<div class="layui-col-md2" style="padding: 8px 0px 8px 8px">'+
                '<div class= "layui-font-16" style="color: #fff">'+
                    JSON.parse(data)[d].ns+
                '</div>'+
                '</div>'+
                '<div class="layui-col-md2" style="padding: 8px 0px 8px 8px">'+
                '<div class= "layui-font-16" style="color: #fff">'+
                    JSON.parse(data)[d].type+
                '</div>'+
                '</div>'+
                '<div class="layui-col-md2" style="padding: 8px 0px 8px 8px">'+
                '<div class= "layui-font-16" style="color: #fff">'+
                    JSON.parse(data)[d].ip+
                '</div>'+
                '</div>'+
                '<div class="layui-col-md3" style="padding: 8px 0px 8px 8px">'+
                '<div class= "layui-font-16" style="color: #fff">'+
                    JSON.parse(data)[d].target_port+
                '</div>'+
                '</div>'+
                '<div class="layui-col-md1" style="padding: 8px 0px 8px 8px">'+
                '<div class= "layui-font-16" style="color: #fff">'+
                '<a href="/compute/service_yaml_new/?name=' + JSON.parse(data)[d].name +
                '&ns=' + JSON.parse(data)[d].ns + '">' +
                '<i class="layui-icon layui-icon-file" style="font-size: large; color: white;" ></i></a>'+
                '</div>'+
                '</div>'+
                '</div>'+
                '<div style="border: 0.5px solid silver"></div>'+
                '</div'

            }
            document.getElementById("dq").innerHTML = v;
        })
    })
</script>





